<template>
  <div>
    <!-- 商品列表 -->
    <el-card class="product_card">
      <el-form :model="searchForm" ref="searchRef" inline label-width="4.5rem">
        <el-form-item label="商品编码" prop="myCode">
          <el-input
            v-model="searchForm.myCode"
            placeholder="请输入商品编码"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="拼音码" prop="spelling">
          <el-input
            v-model="searchForm.spelling"
            placeholder="请输入拼音码"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsTitle">
          <el-input
            v-model="searchForm.goodsTitle"
            placeholder="请输入商品名称"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="商品品牌" prop="brandId">
          <el-select
            v-model="searchForm.brandId"
            placeholder="请选择商品品牌"
            class="form_input"
            filterable
          >
            <el-option label="全部" :value="0" />
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.brandName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否开售" prop="isSelling">
          <el-select v-model="searchForm.isSelling" class="form_input">
            <el-option label="全部" :value="0" />
            <el-option label="上架" :value="1" />
            <el-option label="下架" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品种类" prop="generalId">
          <el-select
            v-model="searchForm.generalId"
            placeholder="请选择商品种类"
            class="form_input"
            @change="handleSelectCategoryList"
            filterable
          >
            <el-option label="全部" :value="0" />
            <el-option
              v-for="item in generalList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="商品分类"
          prop="categoryId"
          v-if="searchForm.generalId != 0"
        >
          <el-select
            v-model="searchForm.categoryId"
            placeholder="请选择商品分类"
            class="form_input"
            @change="handleSelectTypeList"
            filterable
          >
            <el-option label="全部" :value="0" />
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="商品型号"
          prop="typeId"
          v-if="searchForm.categoryId != 0"
        >
          <el-select
            v-model="searchForm.typeId"
            placeholder="请选择商品分类"
            class="form_input"
            filterable
          >
            <el-option label="全部" :value="0" />
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.typeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="ml-4">
          <el-button
            type="primary"
            icon="Search"
            @click="handleSearch"
            class="btn"
            >查询</el-button
          >
          <el-button icon="Refresh" @click="handleReset" class="btn"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mt-1 product_card">
      <div class="flex justify-end mb-[0.2rem]">
        <el-button
          type="primary"
          icon="Plus"
          class="btn"
          @click="openDrawer(0)"
        >
          新增
        </el-button>
      </div>

      <el-table
        :data="tableData"
        :style="{
          height: 'calc(100vh - 18.5rem)',
        }"
      >
        <el-table-column prop="myCode" label="商品编码" fixed />
        <el-table-column prop="spelling" label="拼音码" fixed />
        <el-table-column prop="goodsTitle" label="商品名称" fixed />
        <el-table-column prop="brandName" label="商品品牌" />
        <el-table-column prop="categoryName" label="商品分类" />
        <el-table-column
          prop="typeName"
          label="商品型号/系列"
          :min-width="130"
        />
        <el-table-column
          label="是否开售(上架/下架)"
          :width="160"
          align="center"
        >
          <template #default="{ row }">
            <el-switch
              v-model="row.isSelling"
              :active-value="1"
              :inactive-value="2"
              @change="handleSellingStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="个性化标签"
          show-overflow-tooltip
          :min-width="120"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
          :min-width="220"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button type="primary" @click="openDrawer(row.id)" link>
              <el-icon> <Edit /> </el-icon>编辑
            </el-button>
            <!-- <el-button
                type="danger"
                v-if="row.isModified === 1"
                @click="handleRemove(row.id)"
              >
                <el-icon> <Delete /> </el-icon>删除
              </el-button> -->
            <el-button type="primary" link @click="openSpecDrawer(row)">
              <el-icon> <List /> </el-icon>规格及价格
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <PagingQuery
        :page="page"
        :pageSize="pageSize"
        :total="total"
        @getList="getList"
        class="mt-[0.5rem]"
      />
    </el-card>

    <el-drawer
      v-model="drawer"
      :title="`${detailId == 0 ? '新增' : '编辑'}商品`"
      size="40%"
      destroy-on-close
    >
      <InsertUpdateProduct
        :detailId="detailId"
        ref="insertUpdateRef"
        :generalList="generalList"
        :brandList="brandList"
        @handleBack="handleBack"
      />
      <template #footer>
        <el-button @click="drawer = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmitBtn">
          {{ loading ? "提交中..." : "提 交" }}
        </el-button>
      </template>
    </el-drawer>

    <el-drawer
      v-model="spec_drawer"
      title="规格及价格列表"
      size="80%"
      destroy-on-close
    >
      <specification :detailForm="detailForm" @handleBack="handleBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import InsertUpdateProduct from "./component/InsertUpdateProduct.vue";
import specification from "./component/specification.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  GetGoodsList,
  NotSaleGoods,
} from "../../../../../wailsjs/go/api/GoodsApi.js";

import {
  selectBrandList,
  selectGeneralList,
  selectCategoryList,
  selectTypeList,
} from "@/api/api.js";

onMounted(() => {
  handleSelectBrandList();
  handleSelectGeneralList();
  getList();
});

const searchRef = ref(null);
const searchForm = ref({
  myCode: "",
  spelling: "",
  goodsTitle: "",
  brandId: 0,
  isSelling: 0,
  generalId: 0,
  categoryId: 0,
  typeId: 0,
});

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
async function getList(e) {
  if (e) {
    page.value = e.page;
    pageSize.value = e.pageSize;
  }
  handleApiResponse(() =>
    GetGoodsList({
      ...searchForm.value,
      page: page.value,
      pageSize: pageSize.value,
    })
  ).then((res) => {
    if (res.code == 0) {
      // console.log("商品列表", res);

      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}
const handleSearch = () => {
  getList();
};
const handleReset = () => {
  searchRef.value.resetFields();
  getList();
};

// 1.新增或者修改商品
const insertUpdateRef = ref(null);
const drawer = ref(false);
const loading = ref(false);
const detailId = ref(0);
const openDrawer = (id) => {
  detailId.value = id;
  drawer.value = true;
};

// 提交按钮
const handleSubmitBtn = () => {
  insertUpdateRef.value?.handleSubmit();
};
const handleBack = (val) => {
  if (val == 1) {
    loading.value = true;
    return;
  }
  detailId.value = 0;
  loading.value = false;
  drawer.value = false;
  getList();
};

// 2.删除商品
const handleRemove = (id) => {
  ElMessageBox.confirm("你确定要删除该商品吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage({
      type: "info",
      message: id + "紧急开发中!",
    });
  });
};

// 3.上架或者下架
const handleSellingStatusChange = (row) => {
  let title = row.isSelling == 1 ? "上架" : "下架";
  ElMessageBox.confirm(`你确定要${title}该商品吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      handleApiResponse(() =>
        NotSaleGoods({ id: row.id, isSelling: row.isSelling })
      ).then((res) => {
        if (res.code == 0) {
          ElMessage.success(`${title}成功`);
          getList();
        }
      });
    })
    .catch(() => {
      row.isSelling = row.isSelling == 1 ? 2 : 1;
    });
};

// 4.规格及价格
const spec_drawer = ref(false);
const detailForm = ref(0);
const openSpecDrawer = (row) => {
  detailForm.value = row;
  spec_drawer.value = true;
};

const brandList = ref([]);
const generalList = ref([]);
const categoryList = ref([]);
const typeList = ref([]);

async function handleSelectBrandList() {
  selectBrandList().then((res) => {
    if (res.code == 0) {
      brandList.value = res.data.list || [];
    }
  });
}
async function handleSelectGeneralList() {
  selectGeneralList().then((res) => {
    if (res.code == 0) {
      generalList.value = res.data.list || [];
    }
  });
}
async function handleSelectCategoryList() {
  searchForm.value.categoryId = 0;
  searchForm.value.typeId = 0;
  categoryList.value = [];
  typeList.value = [];

  selectCategoryList(searchForm.value.generalId).then((res) => {
    if (res.code == 0) {
      categoryList.value = res.data.list || [];
    }
  });
}
async function handleSelectTypeList() {
  searchForm.value.typeId = 0;
  typeList.value = [];

  selectTypeList({
    id: searchForm.value.categoryId,
  }).then((res) => {
    if (res.code == 0) {
      typeList.value = res.data.list || [];
    }
  });
}
</script>

<style scoped lang="scss">
.product_card :deep(.el-card__body) {
  @apply px-[0.5rem] py-[0.5rem];
}
.el-form-item {
  @apply mr-1 mb-2;
}

.btn {
  @apply w-[4rem];
}
.allBtn .el-button + .el-button {
  @apply ml-0 mt-1;
}
</style>